<template>
	<view class="">
		<view class="text-center padding-xl bg-white">
		    <image class="cu-avatar xl round" :src="detail.brandLogo" bindtap="handleBack"></image>
		    <view class="text-xl margin-tb-sm" bindtap="handleMine">
		        {{detail.jobName}}
		    </view>
		    <view>{{detail.salaryDesc}}</view>
		    <view class="flex justify-around padding-lr margin-top-sm">
		        <view>
		            <image class="cu-avatar round margin-right-xs" src="@/static/img/job_icon1.png"></image>
		            {{distance.toFixed(2)}}KM
		        </view>
		        <view>
		            <image class="cu-avatar round margin-right-xs" src="@/static/img/job_icon2.png"></image>
		            {{detail.cityName}}·{{detail.areaDistrict}}
		        </view>
		    </view>
		</view>
		<view class="flex justify-around padding bg-white">
		    <view class="border-bottim">工作详情</view>
		    <view>公司信息</view>
		</view>
		<view class="bg-white margin-top-xs padding">
		    <view class="padding-bottom-xs text-bold">
		        经验要求
		    </view>
		    <view>
				<text 
					class="cu-tag bg-mauve margin-bottom-sm"
					v-for="item in detail.jobLabels"
				>{{item}}</text>
			</view>
		</view>
		<view class="bg-white margin-top-xs padding">
		    <view class="padding-bottom-xs text-bold">
		        技能要求
		    </view>
		    <view>
				<text
					class="cu-tag bg-cyan margin-bottom-sm"
					v-for="item in detail.skills"
				>{{item}}</text>
			</view>
		</view>
		<view class="bg-white margin-top-xs padding">
		    <view class="padding-bottom-xs text-bold">
		        福利待遇
		    </view>
		    <view>
				<text
					class="cu-tag bg-orange margin-bottom-sm"
					v-for="item in detail.welfareList"
				>{{item}}</text>
			</view>
		</view>
		<view class="bg-white margin-top-xs padding" v-if="jobLocation">
		    <view class="padding-bottom-xs text-bold">
		        公司位置
		    </view>
		    <map 
				class="job-map"
				:latitude="jobLocation[1]" 
				:longitude="jobLocation[0]"
				:markers="[{
					id:123,
					longitude:jobLocation[0],
					latitude:jobLocation[1],
					iconPath:'../../static/img/loc.png',
					width:20,
					height:20
				}]"
			></map>
		</view>
		<view class="cu-bar foot bg-white justify-center padding-lr">
		    <button class="cu-btn margin-right">
		        <text class="iconfont icon-bookmark-o"></text>
		    </button>
		    <button v-if="status==0" @click="handleJoin" class="cu-btn bg-orange flex-sub">立即报名</button>
		    <button v-if="status==1" class="cu-btn bg-grey flex-sub">待审核</button>
		    <button v-if="status==2" class="cu-btn bg-cyan flex-sub">已查看</button>
		    <button v-if="status==3" class="cu-btn bg-blue flex-sub">约面试</button>
		    <button v-if="status==4" class="cu-btn bg-green flex-sub">已录取</button>
		    <button v-if="status==5" class="cu-btn bg-red flex-sub">已拒绝</button>
		</view>
		
	</view>
	
</template>

<script>
import { jobDetailGet } from '../../api/job';
import { getDistance } from '../../utils/tools';
import {mapState} from 'vuex'
import { joinGet, userJoin } from '../../api/user';
	export default {
		data() {
			return {
				detail:null,
				jobLocation:null,
				distance:0,  //用户与岗位的距离
				status:0,
				jobId:''
			};
		},
		computed: {
			// lnglat() {
			// 	return this.$store.state.loc.lnglat 
			// },
			...mapState({
				lnglat:state=>state.loc.lnglat,
				userInfo:state=>state.user.userInfo
			})
		},
		onLoad(options) {
			console.log(options);
			this.jobId = options.id
			//获取详情
			jobDetailGet(options.id).then(res=>{
				console.log(res);
				this.detail = res.data
				let {cityName,areaDistrict,businessDistrict} = res.data
				this.getLngLat(`${cityName}${areaDistrict}${businessDistrict}`)
			})
			
		},
		onShow() {
			//查询报名状态
			if(this.userInfo){
				let userId = this.userInfo.objectId
				joinGet(userId,this.jobId).then(res=>{
					let {results} = res.data
					if(results.length){
						this.status = results[0].status
					}
				})
			}
		},
		methods: {
			getLngLat(address) {
				let url = `https://restapi.amap.com/v3/geocode/geo?key=3cdf846aab977e514073cb7297e94f47&address=${address}`
				uni.request({
					url,
					success: (res) => {
						console.log(res);
						let {location} = res.data.geocodes[0]
						console.log('岗位经纬度',location);
						let loc = location.split(',')
						this.jobLocation = loc
						this.distance =getDistance(loc[1],loc[0],this.lnglat[1],this.lnglat[0])
					}
				})
			},
			// 报名
			handleJoin(){
				//登录状态判断
				if(!this.userInfo){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return
				}
				//资料完善判断
				let {name,job,resume} = this.userInfo
				if(!name||!job||!resume){
					uni.showModal({
						title:'请完善个人资料',
						content:'报名者至少需要填写姓名、意向岗位、简历后才能提交',
						confirmText:'完善资料',
						success:({confirm})=>{
							if(confirm){
								uni.navigateTo({
									url:'/pages/mine/info-edit'
								})
							}
						}
					})
					return
				}
				let userId = this.userInfo.objectId
				let jobId = this.detail.objectId
				let {brandLogo,brandName,jobName,cityName,areaDistrict,salaryDesc} = this.detail
				userJoin({
					userId,jobId,brandLogo,
					brandName,jobName,cityName,
					areaDistrict,salaryDesc,
					status:1,
				}).then(res=>{
					this.status = 1
				})
			}
		},
	}
</script>

<style lang="scss">
.job-map{
	width: 100%;
}
page{
	padding-bottom: 100upx;
}
</style>
